<template>
	<view>
		<mh-navbar custom title="我的盒柜" fixed center zIndex="1010" />
		<u-toast ref="uToast" />
		<view class="box-container">
			<view class="good-container">
				<scroll-view class="scrool-more" style="height: 100%;width: 100%;" scroll-y="true" scroll-with-animation="true" >
					<view v-for="(item, index) in boxcabinets" :key="index">
						<view class="good-wrap">
							<view class="good-item vertical-center">
								<view class="good-checkbox" @click="selectItem(index)"><checkbox :checked="item.isChecked"></checkbox></view>
								<view class="good-img"><image :src="appUrl + item.img" style="width: 60px;height: 60px;" ></view>
								<view class="good-desc">
									<view class="mb-10">{{item.goodName}}</view>
									<view class="good-ext">
										<view class="mb-5">
											<view class="good-price">商品价格：¥ {{item.goodPrice}}</view>
											<view class="good-num">商品数量：{{item.goodNum}}</view>
										</view>
										<view>
											<u-number-box :min="1" :max="item.goodNum" :index="item.lotteryId" v-model="item.quantity" @change="quantityChange"></u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="split-line"></view> -->
					</view>
				</scroll-view>
				<u-loadmore :status="status" />
			</view>
			<view style="height: 60px;">
				<view class="good-footer">
					<view class="good-all-checkbox vertical-center">
						<checkbox @click="selectAll" :checked="isSelectAll"></checkbox>
						<view>
							<view>选中：<text class="good-all-note">{{selectCount}}</text></view>
							<view>合计：<text class="good-all-note">￥{{allPrice}}</text></view>
						</view>
					</view>
					<view class="good-operate">
						<u-button shape="circle" @click="toRecycle" type="primary">回收</u-button>
						<u-button shape="circle" @click="toShip" type="warning" style="margin-left: 5px;">发货</u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isRecycle" class="recycle-popup-container">
			<view class="mask"></view>
			<view class="recycle-popup-wrap">
				<view class="recycle-title">
					是否回收选中的商品
				</view>
				
				 <view class="recycle-list">
					  <scroll-view class="scrool-more" style="height: 170px;" scroll-y="true" scroll-with-animation="true">
							<view class="recycle-good-wrap mb-10" v-for="(item,index) in checkGoods" :key="index">
								<view class="recycle-good">
									<view class="recycle-good-img">
										<image :src="appUrl + item.img" style="width: 80px;height: 80px;" >
									</view>
									<view class="recycle-good-desc">
										<view class="recycle-good-ext-wrap">
											<view class="recycle-good-ext-name">{{item.goodName}}</view>
											<view class="recycle-good-ext-gold">
													<view>回收：{{item.recover}} 币</view>
													<view>x{{item.quantity}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
					  </scroll-view>
				 </view>
				<view class="recycle-info">
					<view class="recycle-info-select mb-10">
						当前选中{{selectCount}}件商品，回收后可获得 {{countGold}}币
					</view>
					<view class="recycle-info-operate mb-10">
						<u-button size="medium" shape="circle" @click="cancelRecycle">取消</u-button>
						<u-button size="medium" shape="circle" @click="defineRecycle" type="warning">确认回收</u-button>
					</view>
					<view>
						所有回收的余额将直接进入你的潮盒余额，一经回收，不可撤销！(余额可在支付订单时1:1抵扣现金)
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appUrl:this.$store.state.vuex_config.appUrl,
				list: 15,
				page: 0,
				//全选
				isSelectAll: false,
				selectCount:0,
				countGold:0,
				allPrice: 0,
				boxcabinets:[],
				checkGoods:[],
				isRecycle:false,
				defaultAddressId:'',
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				pageNum: 1,
				pageSize: 15,
			}
		},
		created() {
			this.getBoxcabinets();
			this.getDefAddress();
		},
		mounted() {
		    let info = uni.createSelectorQuery().in(this).select('.navbar').boundingClientRect();
		    info.exec(res => {
		        console.log('状态栏高度：' + res)
		    })
		},
		methods: {
			quantityChange(e) {
				console.log('当前值为: ' + e.index)
				console.log('当前值为: ' + e.value)
				for (var i = 0; i < this.boxcabinets.length; i++) {
					var box = this.boxcabinets[i];
					if(box.lotteryId==e.index){
						if(e.value>box.goodNum){
							uni.showToast({
								title:'数值大于商品数量~',
								icon:'none'
							})
							this.boxcabinets[i].quantity = box.goodNum;
							this.$set(box, 'quantity', box.goodNum);
							//console.info(box);
							//console.info(this.boxcabinets);
							return;
						}
					}
				}
			},
			//我的盒柜
			getBoxcabinets(){
				debugger
				this.$u.api.boxcabinets({pageNum:this.pageNum,pageSize:this.pageSize}).then(res => {
						if (res.code == 200){
							if(res.data.length > 0){
								this.boxcabinets = this.boxcabinets.concat(res.data);
								debugger
								this.status = 'loadmore';
							}else{
								this.status = 'nomore';
							}
						}
				});
			},
			getDefAddress(){
				this.$u.api.defAddress().then(res => {
					if (res.code == 200){
						debugger
						if(res.data != null){
							this.defaultAddressId = res.data.addressId
						}
					}
				});
			},
			selectAll() {
				this.isSelectAll = !this.isSelectAll;//取反
				for(var i=0;i<this.boxcabinets.length;i++){//循环
					var invoice = this.boxcabinets[i];//变量 invoice == 数组每一项
					invoice.isChecked = this.isSelectAll;//  赋值
				}
				this.calcCount();//调用函数
			},
			selectItem(index) {
				var invoice =  this.boxcabinets[index];//变量 invoice == 数组每一项索引
				if(invoice){
					invoice.isChecked = !invoice.isChecked   //取反
				}
				 this.calcCount();//调用函数	
			},
			checkAddGood(obj){
				debugger
				//添加到勾选里
				var flag = false;
				for (var i = 0; i < this.checkGoods.length; i++) {
					if(this.checkGoods[i].goodId == obj.goodId){
						flag = true;
						continue;
					}
				}
				if(!flag){
					this.checkGoods.push(obj);
					console.info('数组：' + this.checkGoods)
				}
			},
			checkDelGood(obj){
				for(var i=this.checkGoods.length;i>=0;i--){
					 if(this.checkGoods[i].goodId == obj.goodId){
						this.checkGoods.splice(i,1);
					 }
				 }
			},
			calcCount(){
				this.selectCount = 0;
				this.allPrice = 0 ;
				this.checkGoods = [];
				for(var i=0;i<this.boxcabinets.length;i++){ 
					var invoice = this.boxcabinets[i];
					var allPrice = this.boxcabinets[i].goodPrice;
					if(invoice.isChecked){   //判断是否为true，if条件判断，为真时执行，默认·是false “复选框 属性选中时为true”
						this.selectCount++;//递增
						this.allPrice += this.boxcabinets[i].goodPrice * this.boxcabinets[i].quantity//累加
						debugger
						this.boxcabinets[i].countRecover = this.boxcabinets[i].recover*this.boxcabinets[i].quantity;
						this.countGold = this.countGold + this.boxcabinets[i].countRecover;
						this.checkAddGood(invoice);
					}
				}
			},
			toRecycle(){
				if(this.checkGoods.length == 0 ){
					this.$refs.uToast.show({
						title: '请勾选你要回收的商品!',
						type: 'error', 
					})
					return;
				}
				this.isRecycle = true;
				console.info('回收：' + this.checkGoods.length);
			},
			toShip(){
				if(this.checkGoods.length == 0 ){
					this.$refs.uToast.show({
						title: '请勾选你要发货的商品!',
						type: 'error', 
					})
					return;
				}
				var goods = new Array();
				for (var i = 0; i < this.checkGoods.length; i++) {
					var good = new Object();
					good.goodId = this.checkGoods[i].goodId;
					good.quantity = this.checkGoods[i].quantity;
					good.lotteryId = this.checkGoods[i].lotteryId;
					goods.push(good);
				}
				let param = encodeURIComponent(JSON.stringify(goods));
				debugger
				uni.navigateTo({
					url: 'pages/boxcabinet/ship?goods=' + param + '&addressId=' + this.defaultAddressId
				})
			},
			cancelRecycle(){
				this.isRecycle = false;
			},
			defineRecycle(){
				this.$u.api.goodRecycle(this.checkGoods).then(res => {
					if (res.code == 200){
						this.$refs.uToast.show({
							title: '回收成功'
						})
						this.isRecycle = false;
						uni.reLaunch({
							url: '/pages/boxcabinet/boxcabinet'
						});
						// uni.switchTab({
						//     url: 'pages/boxcabinet/boxcabinet',
						//     success(){
						//         let page = getCurrentPages().pop(); //跳转页面成功之后
						//         if (!page) return; 
						//             page.onLoad(); //如果页面存在，则重新刷新页面
						//         }
						// });
					}else{
						this.$refs.uToast.show({
							 title: res.msg,
							 type: 'error', 
						})
					}
				});
			},
			onReachBottom() {
				debugger
				this.pageNum = ++ this.pageNum;
				this.getBoxcabinets();
			}
		}
	}
</script>

<style lang="scss">

/* 解决移除原生导航栏后页面与手机状态栏重叠问题 */
.status_bar {  
	height: var(--status-bar-height);  
	width: 100%;  
	background-color: #ffffff;  
}  
.top_view {  
	height: var(--status-bar-height);  
	width: 100%;  
	position: fixed;  
	background-color: #ffffff;  
	top: 0;  
	z-index: 999;  
}  
.good-container{
	width: 100%;
	height: 100%;
}
.good-wrap{
	padding: 20px;
	background: #FFFFFF;

	.good-item{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		.good-checkbox{
			width: 10%;
			margin-right: 10px;
		}
		.good-img{
			width: 30%;
			margin-right: 10px;
		}
		.good-desc{
			width: 60%;
		}
	}
}
.good-footer{
	position: fixed;
	bottom: calc(var(--window-bottom));
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 60px;
	background-color: #FFFFFF;
	padding: 0 20px 0 20px;
	z-index: 1000;
	.good-all-checkbox{
		display: flex;
		flex-direction: row;
		.good-all-note{
			color: red;
		}
	}
	.good-operate{
		display: flex;
		flex-direction: row;
	}
}

.mask{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	z-index:888;
	background-color: rgba(0, 0, 0, 0.6);
}
.recycle-popup-container{
	display: flex;
	justify-content: center;
	.recycle-popup-wrap{
		position: absolute;
		top: 25%;
		bottom: 25%;
		z-index: 998;
		width: 90%;
		border-radius: 25px;
		background: #f0f4f7;
		padding: 0 20px 0 20px;
		.recycle-title{
			padding: 20px 0 20px 0;
			display: flex;
			justify-content: center;
			font-size: 18px;
			font-weight: bold;
		}
		.recycle-list{
			flex: 1;
				position: relative;
			
				.scrool-more {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
				}
			
				.list {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #e0e0e0;
			
				}
		}
		.recycle-good-wrap{
			.recycle-good{
				display: flex;
				.recycle-good-img{
					flex: 0 0 20%;
				}
				.recycle-good-desc{
					flex: 0 0 70%;
					margin-left: 5px;
					display: flex;
					.recycle-good-ext-wrap{
						display: flex;
						flex-direction: column;
						width: 100%;
						position: relative;
						height: 100%;
						.recycle-good-ext-name{
							position: absolute;
							top: 10px;
						}
						.recycle-good-ext-gold{
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							position: absolute;
							bottom: 10px;
							width: 100%;
						}
					}

				}
			}
		}
		.recycle-info{
			 position: absolute;
			 bottom: 10px;
			 left: 0px;
			 padding: 0 20px 0 20px;
			 .recycle-info-select{
				 display: flex;
				 justify-content: center;
				 align-items: center;
			 }
			.recycle-info-operate{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}
	}
}

</style>
